<template>
	<view>
		<view class="status-bar">

		</view>
		<uni-nav-bar left-icon="left" @clickLeft="leftback" title="医生信息" :border="false" :height="barhig"
			class="header-title" />
		<view class="container" :style="`padding-top:${systemBarHeight+64}px`">
			<DoctorinfoTheader :yisen='yisen' :paiban="paiban" @openPop="openPop"></DoctorinfoTheader>
			<view class="footer-tj">
				<text>更多同科医生</text>
				<view class="tj-porsen">
					<remenddoctor :doctorList="item" v-for="item in doctorList" :key="item.dt_id"></remenddoctor>
				</view>
			</view>
		</view>
		<view class="openpop">
			<uni-popup ref="popup" type="bottom" background-color="#fff" class="popup">
				<view class="popup-content">
					<view class="uptitle">
						<text>选择预约时间段</text>
						<uni-icons @click="close" type="closeempty" size="24" class="chacc" color="#ccc"></uni-icons>
					</view>
					<view class="morning">
						<text class="label">上午号源: </text><text>剩余{{swnum}}</text>
						<view class="date-bar">
							<button class="date-btn" size="mini" @click="selectDate(item,'上午')"
								v-for="(item,i) in swDate" :key="i">{{item}}</button>
						</view>
					</view>
					<view class="after morning">
						<text class="label">上午号源: </text><text>剩余{{xwnum}}</text>
						<view class="date-bar">
							<button class="date-btn" size="mini" @click="selectDate(item,'下午')"
								v-for="(item,i) in xwDate" :key="i">{{item}}</button>
						</view>
					</view>
				</view>

			</uni-popup>
		</view>
	</view>

</template>

<script>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		setDoctorPaiban
	} from '@/utils/axios.js'
	import formatDay from "@/utils/format.js"
	import DoctorinfoTheader from '@/components/bookingReg/DoctorInfoTheader/DoctorInfoTheader.vue'
	import remenddoctor from '@/components/bookingReg/remenddoctor/remenddoctor.vue'
	import {
		ref,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	export default {
		components: {
			DoctorinfoTheader,
			remenddoctor
		},
		setup() {
			const data = reactive({
				barhig: '120rpx',
				systemBarHeight: null,
				yisen: {},
				paiban: [
				],
				swDate: [
					'09:00-09:30',
					'09:30-10:00',
					'10:00-10:30',
					'10:30-11:00',
					'11:00-11:30',
					'11:30-12:00',
				],
				xwDate: [
					'14:00-14:30',
					'14:30-15:00',
					'15:00-15:30',
					'15:30-16:00',
					'16:00-16:30',
					'16:30-17:00',
				],
				doctorList: [
				],
				fromdata:{
					id:null,
					start:null,
					end:null,
					one_id:null,
					two_id:null
				},
				swnum:null,
				xwnum:null,
				hzform:{}
			})
			 onLoad(option=>{
				 console.log(option);
				 data.yisen=JSON.parse(option.item)
				 data.yisen.tagli=data.yisen.tag.split('；')
				 data.fromdata.id=data.yisen.dt_id
				 data.fromdata.one_id=data.yisen.one_id
				 data.fromdata.two_id=data.yisen.two_id
				 data.fromdata.start=formatDay()
				 let day=new Date()
				 let date=day.setDate(day.getDate()+7)
				 data.fromdata.end=formatDay(date)
				 console.log(data.fromdata);
				 setdtPb(data.fromdata)
			 })
			 const setdtPb=(obj)=>{
				 setDoctorPaiban(obj).then(res=>{
					 data.paiban=res.pbData
					 console.log(res);
					 data.doctorList=res.dtdatas
				     data.paiban.forEach(item=>{
						 item.sched_date=formatDay(item.sched_date)
						 let odd=new Date(item.sched_date).getDay()
                         let asd=formatDay(new Date())
						 let start=new Date(asd)
						 let end=new Date(item.sched_date)
						 let times=end.getTime()-start.getTime()
						 let tians=parseInt(times/(1000*60*60*24))
						 item.time=tians
						 switch (odd){
						 	case 0:item.day='周日' ;break;
						 	case 1:item.day='周一' ;break;
						 	case 2:item.day='周二' ;break;
						 	case 3:item.day='周三' ;break;
						 	case 4:item.day='周四'; break;
						 	case 5:item.day='周五' ;break;
						 	case 6:item.day='周六' ;break;
						 	
						 }
						 if(item.am_sy==null){
						 	item.am_sy=0
						 }
						 if(item.pm_sy==null){
						 	item.am_sy=0
						 }
						 
						 item.num=item.am+item.pm-item.am_sy-item.pm_sy
						 item.am_num=item.am-item.am_sy
						 item.pm_num=item.pm-item.pm_sy
					 })
					 console.log(data.paiban,data.doctorList,23233);
				 })
			 }
			// #ifdef MP-WEIXIN
			const getCapsule = () => {
				// 获取胶囊位置并改变顶部自定义导航栏的位置
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				
				//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
				data.barhig = (menuButtonInfo.top + menuButtonInfo.height) * 2 + 'rpx';
			}
			getCapsule()
			const getSysteminfo = () => {
				uni.getSystemInfo({
					success: res => {
						data.systemBarHeight = res.statusBarHeight;
					
					}
				});
			}
			getSysteminfo()
			// #endif
			const leftback = () => {
				uni.navigateBack({
					delta: 1
				});
			}
			const openPop = (obj,val) => {
				console.log(obj,val)
				data.swnum=obj.am_num
				data.xwnum=obj.pm_num
				data.hzform.yisen=obj
				data.hzform.yonghu=val
				open()
			}
			const popup = ref(null)

			const open = () => {
				popup.value.open('bottom')
			}
			const close = () => {
				popup.value.close()
			}
			const selectDate = (val, date) => {
				console.log(val, date);
				data.hzform.sjduan=val
				data.hzform.sxwu=date
				uni.navigateTo({
					url: "/pages/home/bookingReg/reservation/reservation?item="+JSON.stringify(data.hzform)
				})
				close()
			}

			return {
				...toRefs(data),
				openPop,
				open,
				close,
				popup,
				selectDate,
				leftback
			}
		}
	}
</script>

<style lang="scss">
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		z-index: 998999;
	}

	.header-title {
		position: fixed;
		width: 100%;
		top: var(--status-bar-height);
		z-index: 998999;
	}

	.container {
		padding: 24rpx 36rpx;
	}

	.openpop {
		.popup {
			border-radius: 20rpx;

			.popup-content {
				padding: 36rpx;
				box-sizing: border-box;
			}

			::v-deep uni-view[name="content"] {
				border-radius: 40rpx 40rpx 0 0;
				overflow: hidden;
			}
		}

		.uptitle {
			text-align: center;
			height: 60rpx;
			position: relative;
			font-size: 34rpx;

			.chacc {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 0;

			}
		}

		.morning {
			margin-top: 28rpx;
			margin-bottom: 36rpx;

			text {
				color: #333;
				font-size: 30rpx;
			}

			.label {
				color: #999;
				font-size: 28rpx;
			}

			.date-bar {
				margin-top: 32rpx;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-gap: 20rpx;

				.date-btn {
					padding: 8rpx 30rpx;
					color: #0066ff;
				}

				::v-deep .date-btn::after {
					border: none;
				}
			}
		}
	}

	.footer-tj {
		margin-top: 48rpx;

		.tj-porsen {
			margin-top: 36rpx;
		}
	}
</style>
